<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<title>商品编辑</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="../css/bootstrap.css" />
	<script type="text/javascript" src="../easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../uploadjs/vendor/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../uploadjs/jquery.iframe-transport.js"></script>
	<script type="text/javascript" src="../uploadjs/jquery.fileupload.js"></script>
</head>
<body>
<div class="container-fluid">

	<jsp:include page="../admin/header.jsp"></jsp:include>

	<br><br>
	<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
		<input type="hidden" id="id" name="id" value="${g.id }"/>
		<input type="hidden" id="pageNo" name="pageNo" value="${param.pageNo }"/>
		<input type="hidden" id="type" name="type" value="${param.type }"/>
		<div class="form-group">
			<label for="input_name" class="col-sm-1 control-label">名称</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="name" name="name" value="${g.name }" required="required">
			</div>
		</div>
		<div class="form-group">
			<label for="input_name" class="col-sm-1 control-label">价格</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="price" name="price" value="${g.price }">
			</div>
		</div>
		<div class="form-group">
			<label for="input_name" class="col-sm-1 control-label">介绍</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="intro" name="intro" value="${g.intro }">
			</div>
		</div>
		<div class="form-group">
			<label for="input_name" class="col-sm-1 control-label">库存</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="stock" name="stock" value="${g.stock }">
			</div>
		</div>
		<div class="form-group">
			<label for="input_file" class="col-sm-1 control-label">封面图片</label>
			<div class="col-sm-6"><img id="cover" src="data:image/png;base64,<c:out value='${g.coverStr}' />" width="200"/>
				<input id="goodsCoverFileupload" type="file" name="files[]" data-url="../goodsController/addUploadGoodsCover">推荐尺寸: 500 * 500
			</div>
		</div>
		<div class="form-group">
			<label for="input_file" class="col-sm-1 control-label">详情图片1</label>
			<div class="col-sm-6"><img id="image1" src="data:image/png;base64,<c:out value='${g.image1Str}' />" width="200"/>
				<input id="goodsImage1Fileupload" type="file" name="files[]" data-url="../goodsController/addUploadGoodsImage1">推荐尺寸: 500 * 500
			</div>
		</div>
		<div class="form-group">
			<label for="input_file" class="col-sm-1 control-label">详情图片2</label>
			<div class="col-sm-6"><img id="image2" src="data:image/png;base64,<c:out value='${g.image2Str}' />" width="200"/>
				<input id="goodsImage2Fileupload" type="file" name="files[]" data-url="../goodsController/addUploadGoodsImage2">推荐尺寸: 500 * 500
			</div>
		</div>
		<div class="form-group">
			<label for="select_topic" class="col-sm-1 control-label">类目</label>
			<div class="col-sm-6">
				<select class="form-control" id="type" name="type">
					<c:forEach items="${typeList }" var="t">
						<option <c:if test="${t.id==g.type }">selected="selected"</c:if> value="${t.id }">${t.name }</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-1 col-sm-10">
				<button type="button" class="btn btn-success" onclick="updateGoods()">提交修改</button>
			</div>
		</div>
	</form>
</div>
</body>
<script type="text/javascript">
$(function () {
$('#goodsCoverFileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        async: false,
        formData : function() {
            return [{name:"id",value:$("#id").val()}
                ];
        },
        success: function(data, textStatus) {
        if (data.success == true){
            $("#cover").prop("src","data:image/png;base64,"+data.data)
        }
        },
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    },
});
$('#goodsImage1Fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        async: false,
        formData : function() {
            return [{name:"id",value:$("#id").val()}
                ];
        },
        success: function(data, textStatus) {
        if (data.success == true){
            $("#image1").prop("src","data:image/png;base64,"+data.data)
        }
        },
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    },
});
$('#goodsImage2Fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        async: false,
        formData : function() {
            return [{name:"id",value:$("#id").val()}
                ];
        },
        success: function(data, textStatus) {
        if (data.success == true){
            $("#image2").prop("src","data:image/png;base64,"+data.data)
        }
        },
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    },
});
});

function updateGoods(){
    $.ajax({
        type: "post",
        url: "../admin/goods_edit",
        data: JSON.stringify({
            id:$("#id").val(),
            name:$("#name").val(),            
            price:$("#price").val(),
            intro:$("#intro").val(),
            stock:$("#stock").val(),
            type:$("select[name='type'] option:selected").val()
         }),
        dataType: 'json',
        contentType:"application/json;charset=UTF-8",
        success: function(data, textStatus) {
            if (data.success){
            	window.location="../admin/goods_list";
            }
        },
        complete : function(XMLHttpRequest, textStatus) {
        },
        error : function(XMLHttpRequest,textStatus,errorThrown) {
            alert("Error:"+textStatus);
            alert(errorThrown.toString());
        }
    }); 
}
</script>
</html>